<template>
  <view class="h_body">
    <nut-checkbox-group v-model="radioVal" @change="chooseChange">

      <view class="h_card more_server" @click.stop="gotoCoolection">
        <view class="top" >
          <view class="left" @click.stop="gotoCoolection">
            <image src="@/assets/images/index/gengduofuwu_icon_daishouhuokuan.png"></image>
            <view class="text">代收货款</view>
            <Tips></Tips>
          </view>
          <view class="right"> <nut-checkbox label="1" @click.stop="changeAgent"></nut-checkbox></view>
        </view>
        <view class="bottom">在货物签收成功并在返款周期内，将货款返款至您指定账户中</view>
        <view class="btm" v-if="radioVal.indexOf('1')!=-1">
          <text>{{returnCycleName}} {{sendGoodsStore.returnCycle}}元</text>
          <text style="color:#0966ff">¥{{sendGoodsStore.serveFee}}</text>
        </view>
      </view>
<!--      <collection v-if="radioVal.indexOf('1') != -1"></collection>-->
      <view class="h_card more_server" @click.stop="openBill">
        <view class="top">
          <view class="left">
            <image src="@/assets/images/index/gengduofuwu_icon_danjvfuwu.png"></image>
            <view class="text">单据服务</view>
            <Tips></Tips>
          </view>
          <view class="right"> <nut-checkbox label="2" @click.stop="changeBill"></nut-checkbox></view>
        </view>
        <view class="bottom">为您提供附单据，资料；承运单；附厂单，资料单据服务</view>
        <view class="btm" v-if="radioVal.indexOf('2')!=-1">
          <text>{{priceText}}</text>
          <text style="color:#0966ff" v-if="sendGoodsStore.clearingForm!='3'">¥{{price}}</text>
        </view>
      </view>
      <view class="h_card more_server">
        <view class="top">
          <view class="left">
            <image src="@/assets/images/index/gengduofuwu_icon_baozhuangfuwu1.png"></image>
            <view class="text">包装服务</view>
          </view>
          <view class="right"><nut-checkbox label="3"></nut-checkbox></view>
        </view>
        <view class="bottom">多种包装服务，保障您的货物安全</view>
      </view>
      <view class="keep_money_foot">
        <view class="left">
          <view class="one" v-if="sendGoodsStore.clearingForm!='3'">费用</view>
          <view class="tow" v-if="sendGoodsStore.clearingForm!='3'">¥{{totalPrice}}</view>
        </view>
<!--        <view class="right" @click="getKeepMoneyInfo" :class="{insureMoney_active:radioVal.length != 0}">确 定</view>-->
        <view class="right insureMoney_active" @click="getKeepMoneyInfo">确 定</view>
      </view>
    </nut-checkbox-group>
    <!-- 单据服务弹窗 -->
    <nut-popup :style="{ height: '760rpx' }" position="bottom" :closeable="true" round v-model:visible="billPop">
      <view class="billPop">
        <view class="title">单据服务</view>
        <view class="contant">
          <view class="contants">
            <view class="row" @click="chooseType('1')" >
              <view class="choose" v-if="!hasBillServer('1')"
                :class="{no_check_gray:hasBillServer('3')}"
              ></view>
              <view v-else>
                <image src="@/assets/images/index/icon_已选.png"></image>
              </view>
              <view class="text" >附单据，资料</view>
              <view class="m" v-if="sendGoodsStore.clearingForm!='3'">¥5</view>
            </view>
            <view class="row" @click="chooseType('2')">
              <view class="choose"  v-if="!hasBillServer('2')"
                :class="{no_check_gray:sendGoodsStore.clearingForm=='3'&&sendGoodsStore.clearingFormInfo.demand.require!='签回承运单'&&sendGoodsStore.clearingFormInfo.demand.require!='承运单'}"
              ></view>
              <view  v-else :class="{check_gray:sendGoodsStore.clearingForm=='3'&&(sendGoodsStore.clearingFormInfo.demand.require=='签回承运单'||sendGoodsStore.clearingFormInfo.demand.require=='承运单')}">
                <image src="@/assets/images/index/icon_已选.png"></image>
              </view>
              <view class="text" @click="chooseType('2')" >承运单</view>
              <view class="m" style="margin-left: 513rpx;" v-if="sendGoodsStore.clearingForm!='3'">¥5</view>
            </view>
            <view class="row ss" @click="chooseType('3')">
              <view class="choose" v-if="!hasBillServer('3')"
                :class="{no_check_gray:hasBillServer('1')||(sendGoodsStore.clearingForm=='3'&&(sendGoodsStore.clearingFormInfo.demand.require=='签回承运单'||sendGoodsStore.clearingFormInfo.demand.require=='承运单'))}"
              ></view>
              <view  v-else>
                <image src="@/assets/images/index/icon_已选.png" :class="{check_gray:sendGoodsStore.clearingForm=='3'&&sendGoodsStore.clearingFormInfo.demand.require!='签回承运单'&&sendGoodsStore.clearingFormInfo.demand.require!='承运单'}"></image>
              </view>
              <view class="text" >附厂单，资料</view>
              <view class="m" v-if="sendGoodsStore.clearingForm!='3'">¥10</view>
            </view>
            <view class="number_bill" v-if="hasBillServer('3')">
              <view class="bill">
                <view class="q">签</view>
                <nut-input v-model="sendGoodsStore.billNum" placeholder="" />
                <view class="q">几联</view>
              </view>
            </view>
          </view>
          <view class="tips">
            <view class="tips_box">
              <text>温馨提示：</text>
              <text>1.附单据，无需返单5元。</text>
              <text>2.原件返还10元。</text>
            </view>
          </view>
        </view>
        <view class="foot">
          <view class="button" @click="billSure">确 定</view>
        </view>
      </view>

    </nut-popup>
  </view>

</template>
<script lang="ts" setup>
import { Tips } from "@nutui/icons-vue-taro";
import { ref,computed,nextTick } from "vue";
import { useDidShow } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import useSendGoodsStore from "../../store/sendGoods";
import collection from "./collection.vue";
const sendGoodsStore = useSendGoodsStore();
const radioVal = ref<string[]>(sendGoodsStore.moreChoose);
const returnCycleName = computed(()=>{
  if(sendGoodsStore.returnCycle=='1'){
    return '即日退'
  }
  else if(sendGoodsStore.returnCycle=='2'){
    return '三日退'
  }
  else if(sendGoodsStore.returnCycle=='3'){
    return '月结'
  }
  return ''
})
const totalPrice = computed(()=>{
  let sum = 0;
  if(radioVal.value.indexOf("1") !== -1){
    sum += Number(sendGoodsStore.serveFee)
  }
  if(radioVal.value.indexOf("2") !== -1){
    sum += Number(price.value)
  }
  return sum.toFixed(2)
})
function getKeepMoneyInfo() {
  // if (radioVal.value.length == 0) {
  //   return;
  // }
  if (radioVal.value.indexOf("3") != -1) {
    sendGoodsStore.packing = "1";
  } else {
    sendGoodsStore.packing = "0";
  }
  if (radioVal.value.indexOf("2") != -1) {
    if(price.value == '' || price.value == '0'){
      Taro.showToast({
        icon: 'error',
        title: '请选择回单类型'
      })
      return
    }
    sendGoodsStore.costList[6].m =  sendGoodsStore.clearingForm=='3' ? '0' : price.value;
  } else {
    sendGoodsStore.costList[6].m = "0";
  }
  if (radioVal.value.indexOf("1") != -1) {
    if (!sendGoodsStore.collectionMoney) {
      Taro.showToast({
        icon: 'none',
        title: '请输入代收货款金额'
      })
      return;
    }
    if (sendGoodsStore.returnType == "2" && !sendGoodsStore.returunAccount) {
      Taro.showToast({
        title: '请选择返还方式'
      })
      return;
    }
    sendGoodsStore.costList[4].m = sendGoodsStore.serveFee;
  } else {
    sendGoodsStore.costList[4].m = "0";
  }
  sendGoodsStore.moreChoose = radioVal.value;
  Taro.navigateBack();
}
const billPop = ref<boolean>(false);
const price = ref<string>("0");
const priceText = ref<string>("");
function openBill() {
  nextTick(()=>{
      billPop.value = true
  })
}
function changeBill() {
    if(radioVal.value.indexOf('2')!==-1){
      billPop.value = true
    }
}
function chooseBz() {
  let index = radioVal.value.indexOf("3");
  if (index == -1) {
    radioVal.value.push("3");
  } else {
    radioVal.value.splice(index, 1);
  }
}
//跳转代收货款
function changeAgent() { 
    if(radioVal.value.indexOf('1')!==-1){
      Taro.navigateTo({
        url: '/pages/sendGoods/moreServerAgent'
      })
    }
}
//检查回单类型
const hasBillServer = (str)=>{
  let strArr = sendGoodsStore.billServer ? sendGoodsStore.billServer.split(',') : []
  return strArr.indexOf(str) !== -1
}
useDidShow(() => {
  // if (
  //   sendGoodsStore.collectionPayment && sendGoodsStore.collectionPayment != "0"
  // ) {
  //   if (radioVal.value.indexOf("2") == -1) {
  //     radioVal.value.push("2");
  //   }
  // }
  fdj();
});
function chooseType(e) {
  console.log(e,sendGoodsStore.billServer);
  //附单据资料
  if (e == '1') {
    //取消勾选
    if(hasBillServer('1')){
      let strArr = sendGoodsStore.billServer.split(',').filter((item)=>{
        return item !== '1'
      })
      sendGoodsStore.billServer = strArr.join(',')
    }
    //勾选
    else{
      //勾选了厂单则不能勾选
      if(!hasBillServer('3')){
        let strArr = sendGoodsStore.billServer ? sendGoodsStore.billServer.split(',') : []
        strArr.push('1')
        sendGoodsStore.billServer = strArr.join(',')
      }
    }
  }
  //承运单
  else if (e == 2) {
    //取消勾选
    if(hasBillServer('2')){
      //回单要求为承运单的不能取消勾选
      if(sendGoodsStore.clearingFormInfo.demand?.require!=='签回承运单'&&sendGoodsStore.clearingFormInfo.demand?.require!=='承运单'){
        let strArr = sendGoodsStore.billServer.split(',').filter((item)=>{
          return item !== '2'
        })
        sendGoodsStore.billServer = strArr.join(',')
      }
    }
    //勾选
    else{
      if(!sendGoodsStore.clearingFormInfo.demand?.require){
        let strArr = sendGoodsStore.billServer ? sendGoodsStore.billServer.split(',') : []
        strArr.push('2')
        sendGoodsStore.billServer = strArr.join(',')
      }
    }
  }
  //附厂单资料
  else if (e == 3) {
    //取消勾选
    if(hasBillServer('3')){
      //回单要求不为承运单的不能取消勾选
      if(!sendGoodsStore.clearingFormInfo.demand?.require){
        let strArr = sendGoodsStore.billServer.split(',').filter((item)=>{
          return item !== '3'
        })
        sendGoodsStore.billServer = strArr.join(',')
      }
    }
    //勾选
    else{
      //勾选了单据则不能勾选，回单要求为承运单的也不能勾选
      if(!hasBillServer('1') && sendGoodsStore.clearingFormInfo.demand?.require!=='签回承运单'&&sendGoodsStore.clearingFormInfo.demand?.require!=='承运单'){
        let strArr = sendGoodsStore.billServer ? sendGoodsStore.billServer.split(',') : []
        strArr.push('3')
        sendGoodsStore.billServer = strArr.join(',')
        sendGoodsStore.billNum = "";
      }
    }
  }
  fdj();
}
//去代收货款页面
function gotoCoolection() {
    Taro.navigateTo({
      url: '/pages/sendGoods/moreServerAgent'
    })
}
function chooseChange() {
  if (radioVal.value.indexOf("2") == -1) {
    //付款方式签单则必须勾选单据服务
    if(sendGoodsStore.clearingForm=='3'){
      radioVal.value.push('2')
    }
    else{
      price.value = "0";
      sendGoodsStore.billServer = '';
      sendGoodsStore.billNum = '';
    }
  }
  if (radioVal.value.indexOf("1") == -1) {
    sendGoodsStore.returnType = "2";
    sendGoodsStore.returunAccount = null;
    sendGoodsStore.collectionPayment = '0';
    //代收货款金额
    sendGoodsStore.collectionMoney = "0";
    //返回周期
    sendGoodsStore.returnCycle = "1";
    //代收服务费
    sendGoodsStore.serveFee = "0";
  }
}
function billSure() {
  // if (sendGoodsStore.billServer.i == 0 && sendGoodsStore.billServer.j == 0) {
  //   return;
  // }
  billPop.value = false;
  if (radioVal.value.indexOf("2") == -1) {
    radioVal.value.push("2");
  }
}

//附单据费用计算
function fdj() {
  let arr = sendGoodsStore.billServer ? sendGoodsStore.billServer.split(',') : []
  if (arr.length == 0) {
    price.value = "0";
    priceText.value = ''
  }
  else if (arr.length == 1) {
    if (arr.includes('1')) {
      price.value = "5";
      priceText.value = '附单据，资料'
    }
    else if (arr.includes('2')) {
      price.value = "5";
      priceText.value = '承运单'
    } else {
      price.value = "10";
      priceText.value = '附厂单，资料'
    }
  }
  else if (arr.length == 2) {
    if (arr.includes('1')) {
      price.value = "10";
      priceText.value = '附单据，资料；承运单'
    } else {
      price.value = "15";
      priceText.value = '附厂单，资料；承运单'
    }
  }
}
</script>
<style lang="scss">
.billPop {
  overflow: hidden;
  height: 100%;
  .foot {
    width: 100%;
    height: 128rpx;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    .button {
      width: 702rpx;
      height: 88rpx;
      border-radius: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0966ff;
      font-family: PingFang SC Medium;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
  .title {
    height: 112rpx;
    display: flex;
    align-items: center;
    margin-left: 24rpx;
    font-family: PingFangSC-Semibold;
    font-size: 32rpx;
    color: #252525;
    font-weight: 700;
  }
  .contant {
    height: calc(100% - 112rpx);
    width: 100%;
    overflow: auto;
    .contants {
      // height: 344rpx;
      width: 100%;
      padding: 16rpx 0;
      box-sizing: border-box;
      background: #f5f5f5;
      .row {
        background-color: white;
        width: 100%;
        height: 103rpx;
        border-bottom: 1rpx solid #f5f5f5;
        display: flex;
        align-items: center;
        .choose {
          width: 27rpx;
          height: 27rpx;
          border: 1rpx solid #c4c4c4;
          border-radius: 27rpx;
          margin-left: 24rpx;
          background-color: #fff;
          &.no_check_gray {
            background-color: #e5e5e5;
          }
        }
        image {
          width: 30rpx;
          height: 30rpx;
          margin-left: 24rpx;
        }
        .text {
          font-family: PingFang SC;
          font-size: 28rpx;
          color: #252525;
          margin-left: 6rpx;
        }

        .m {
          margin-left: 430rpx;
          font-family: PingFang SC;
          font-size: 28rpx;
          color: #0966ff;
        }
      }
      .ss {
        border: unset;
      }
      .number_bill {
        width: 100%;
        height: 112rpx;
        background-color: white;
        .bill {
          width: 658rpx;
          height: 88rpx;
          border-radius: 8rpx;
          margin-left: 68rpx;
          background: #f5f5f5;
          display: flex;
          align-items: center;
          padding-left: 24rpx;
          box-sizing: border-box;
          .q {
            font-family: Source Han Sans CN;
            font-size: 24rpx;

            color: #666666;
          }
          .nut-input--border {
            border: 1rpx solid #666666;
            border-radius: 8rpx;
            margin-left: 16rpx;
            margin-right: 16rpx;
          }
          .nut-input {
            background-color: unset;
            padding: 0;
            width: 242rpx;
            height: 64rpx;
          }
          .nut-input-value {
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .tips {
      width: 100%;
      padding: 24rpx;
      //background-color: red;
      height: 133rpx;
      box-sizing: border-box;

      .tips_box {
        border: 1px solid #b2d0ff;
        background: #e5efff;
        width: 702rpx;
        height: 133px;
        padding-left: 24rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: PingFang SC;
        font-size: 20rpx;
        color: #666666;
      }
    }
  }
}
.insureMoney_active {
  /* 主蓝 */
  background: #0966ff !important;
}
.bill_active {
  background: #999999 !important;
}
.more_server {
  margin-top: 16rpx;
  .top {
    width: 100%;
    height: 88rpx;
    display: flex;
    .left {
      width: 360rpx;
      /* 渐变浅蓝 */
      background: linear-gradient(104deg, #cce0ff 0%, #ffffff 100%);
      border-top-left-radius: 25rpx;
      display: flex;
      align-items: center;
      padding-left: 24rpx;
      box-sizing: border-box;
      image {
        width: 36rpx;
        height: 36rpx;
      }
      .text {
        font-family: PingFang SC;
        font-size: 28rpx;
        font-weight: 700;
        color: #252525;
        margin-right: 18rpx;
        margin-left: 9rpx;
      }
    }
    .right {
      width: calc(100% - 360rpx);
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
  .bottom {
    width: 100%;
    height: 104rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;

    font-family: PingFang SC;
    font-size: 24rpx;
    color: #999999;
  }
  .btm {
    width: calc(100% - 48rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 24rpx;
    border-top: 1rpx solid #f5f5f5;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #252525;
    height: 72rpx;
  }
}
.keep_money_foot {
  width: 100%;
  height: 128rpx;
  // background-color: red;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: white;
  .left {
    display: flex;
    .one {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #252525;
      font-weight: 700;
      margin-right: 16rpx;
    }
    .tow {
      font-family: PingFang SC Medium;
      font-size: 28rpx;
      color: #0966ff;
    }
  }
  .right {
    width: 460rpx;
    height: 88rpx;
    border-radius: 200rpx;
    background: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC Medium;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.text_active{
  color:#ccc !important;
}

.check_gray {
  filter: grayscale(100%);
}
</style>
